<script setup>
import { onMounted, ref, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let myChart = null
let resizeObserver = null

onMounted(() => {
    // 确保DOM已经渲染
    if (chartRef.value) {
        // 初始化ECharts实例
        myChart = echarts.init(chartRef.value)

        // 配置图表选项
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                backgroundColor: 'rgba(0,0,0,0.7)',
                borderColor: '#02a6b5',
                borderWidth: 1,
                textStyle: {
                    color: '#fff'
                },
                formatter: function (params) {
                    return params[0].name + '<br/>' +
                        '<span style="color:#02a6b5;">●</span> 直接访问: ' +
                        params[0].value
                }
            },
            grid: {
                top: '10%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: "category",
                data: ['旅游行业', '教育行业', '游戏行业', '医疗行业', '电商行业', '社交行业', '金融行业'],
                axisLabel: {
                    color: '#fff',
                    fontSize: 9
                },
                nameTextStyle: {
                    color: '#fff'
                }
            }],
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#fff'
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                }
            },
            series: [
                {
                    barWidth: 20,
                    data: [200, 300, 300, 900, 1200, 1500, 1400],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0)'
                    },
                    itemStyle: {
                        borderRadius: [6, 6, 6, 6],
                        type: 'linear',
                        color: '#2f89cf'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: '#fff'
                    }
                }
            ]
        }

        // 设置图表配置
        myChart.setOption(option)

        // 使用 ResizeObserver 监听容器大小变化
        if (window.ResizeObserver) {
            resizeObserver = new ResizeObserver(() => {
                myChart.resize()
            })
            resizeObserver.observe(chartRef.value)
        } else {
            // 降级方案：监听窗口大小变化
            window.addEventListener('resize', handleResize)
        }
    }
})

// 处理窗口大小变化
const handleResize = () => {
    if (myChart) {
        myChart.resize({
            animation: {
                duration: 300
            }
        })
    }
}

// 组件卸载时清理事件监听器
onUnmounted(() => {
    if (resizeObserver && chartRef.value) {
        resizeObserver.unobserve(chartRef.value)
        resizeObserver = null
    }

    window.removeEventListener('resize', handleResize)

    if (myChart) {
        myChart.dispose()
    }
})
</script>

<template>
    <div ref="chartRef"
        style="width: 100%; height: 240px; -webkit-tap-highlight-color: transparent; user-select: none;"></div>
</template>

<style lang="scss" scoped></style>
